import { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Layout, Breadcrumb } from 'antd';
import SiderMenu from './SiderMenu/index';
import menuData from './SiderMenu/menuData';
import viceMenuData from './SiderMenu/vice-menuData'
import RoutesConfig from '@/routes/index';
import SystemSetting from './SystemSetting';
import { Link, useLocation } from 'react-router-dom';
import config from '../../config.default';
import Style from './index.less';
import tenantReturn from '@/assets/tenantReturn.svg';
import logo from '@/assets/logo.svg';
import { SAVE_SIDEMENUDATA, SAVE_TENANT_INFO, UPDATA_STATE } from '@/reducers/common';
import { getFirstPermission } from '@/utils/util';
const { Header, Content } = Layout
export default function AppLayout() {
    const { pathname } = useLocation();
    const [theme] = useState('light');

    const dispatch = useDispatch();
    const breadcrumb = useSelector((state: { common: initStateType }) => state.common.breadcrumb);
    const tenantInfo = useSelector((state: { common: initStateType }) => state.common.tenantInfo);
    let loginInfo = useSelector((state: { common: initStateType }) => state.common.loginInfo);
    loginInfo = typeof loginInfo == 'boolean' ? {} : loginInfo;
    const projectInfo = useSelector((state: { common: initStateType }) => state.common.projectInfo);//项目信息
    const tenantId = new URLSearchParams(new URL(location.href).search.slice(1)).get('tenantId') // 租户id 
    useEffect(() => {
        if (tenantId) {
            dispatch({ type: SAVE_SIDEMENUDATA, data: viceMenuData });
        } else {
            dispatch({ type: SAVE_SIDEMENUDATA, data: menuData });
            if (projectInfo.id) {
                dispatch({
                    type: UPDATA_STATE, data: {
                        projectInfo: {}
                    }
                });
            }
        }
        return;
    }, [dispatch, tenantId]);
    let homeFlag = pathname == "/home";
    const BreadcrumbList = breadcrumb.map((item) => ({
        key: typeof item === 'string' ? item : item.name,
        title: typeof item === 'string' ? item : <Link to={item.path}>{item.name}</Link>
    }));
    //退出租户后台返回主后台
    async function onUnTenantLogin() {
        //如果项目有的话也清空

        dispatch({
            type: SAVE_TENANT_INFO,
            data: false
        })
        let url = await getFirstPermission(menuData)
        window.location.href = '/#' + url;
    }
    //
    return (
        <Layout style={{ minHeight: '100vh' }}>
            {/* 侧边栏菜单 */}
            <Header className={Style['site-layout-header'] + ' ' + Style[`site-layout-dark`]}>
                <div className={Style.title}>
                    {
                        tenantInfo ?
                            <img src={tenantReturn} style={{ marginRight: 12 }} onClick={onUnTenantLogin} /> : null
                    }
                    <img src={logo} style={{ marginRight: 12 }} />
                    <span style={{ marginRight: 12 }}>{config.layout.defaultTitle}{tenantInfo ? '项目' : loginInfo.userType == 1 ? "运营" : '项目'}管理后台</span>
                    <span>{projectInfo.itemName}</span>
                </div>
                <div style={{ display: "flex", alignItems: "center" }}>
                    {/* <Switch
                checked={theme === 'dark'}
                onChange={value => settheme(value ? 'dark' : 'light')}
                checkedChildren="暗色"
                unCheckedChildren="浅色"
            /> */}
                    {/* <div className={Style.marginRight}></div> */}
                    {/* 用户退出系统，修改密码设置切换账号 */}
                    <SystemSetting />
                </div>

            </Header>
            <Layout className={Style['site-layout']}>
                <SiderMenu theme={theme} />
                {homeFlag ? <RoutesConfig />
                    :
                    <div className={Style.RouteContentWrap}>
                        <div style={{ padding: "0 24px", paddingTop: "12px", fontSize: 14, marginBottom: "12px" }}>
                            {/* 面包屑导航 */}
                            <Breadcrumb items={BreadcrumbList}>
                            </Breadcrumb>
                        </div>
                        <Content
                            className={Style['site-layout-background']}
                            style={{
                                margin: '0 16px 24px 16px',
                                minHeight: 280,
                            }}
                        >
                            <RoutesConfig />
                        </Content>
                    </div>}
            </Layout>
        </Layout>

    );

}
